import './style.scss';
import Logo from '@/assets/photos/network/turingbot.png';
import Notice from '@/assets/icons/notice-icon.png';
import Sculpture from '@/assets/photos/user-sculpture.png';

import { CalendarOutlined, MailOutlined, DownOutlined } from '@ant-design/icons';
import { Button, Col, Dropdown, Menu, Row, Select } from 'antd';
import { useTranslation } from 'react-i18next';
import React, { useState , useEffect} from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import PageHead from '@/components/pageHead';
import NavBarBottom from '@/components/navBarBottom';

import yibiaopan from '@/assets/icons/yibiaopan.png';
import yibiaopan_no from '@/assets/icons/yibiaopan_no.png';
import vip from '@/assets/icons/vip.png';
import vip_no from '@/assets/icons/vip_no.png';
import qianbao from '@/assets/icons/qianbao.png';
import qianbao_no from '@/assets/icons/qianbao_no.png';
import dingdan from '@/assets/icons/dingdan.png';
import dingdan_no from '@/assets/icons/dingdan_no.png';
import jiangli from '@/assets/icons/jiangli.png';
import jiangli_no from '@/assets/icons/jiangli_no.png';
import nft from '@/assets/icons/nft.png';
import nft_no from '@/assets/icons/nft_no.png';
import tongzhi from '@/assets/icons/tongzhi.png';
import tongzhi_no from '@/assets/icons/tongzhi_no.png';
import shezhi from '@/assets/icons/shezhi.png';
import shezhi_no from '@/assets/icons/shezhi_no.png';
import Chrome from '@/Chrome';
function getItem(label, key, icon, noIcon, path) {
    return {
        label,
        key,
        icon,
        noIcon,
        path
    };
}

const Dashboard = () => {
    const { t, i18n } = useTranslation();
    const [seleKey, setSeleKey] = useState(0);
    const [menuItem, setMenuItem] = useState([
        getItem(
            t('Dashboard'),
            '1',
            <img className="sele_icon" src={yibiaopan} />,
            <img className="sele_icon" src={yibiaopan_no} />,
            '/dashboard/home'
        ),
        getItem(
            'VIP',
            '2',
            <img className="sele_icon" src={vip} />,
            <img className="sele_icon" src={vip_no} />
        ),
        getItem(
            t('Wallet'),
            '3',
            <img className="sele_icon" src={qianbao} />,
            <img className="sele_icon" src={qianbao_no} />
        ),
        getItem(
            t('order form'),
            '4',
            <img className="sele_icon" src={dingdan} />,
            <img className="sele_icon" src={dingdan_no} />,
            '/dashboard/OrderForm'
        ),
        getItem(
            t('award'),
            '5',
            <img className="sele_icon" src={jiangli} />,
            <img className="sele_icon" src={jiangli_no} />,
            '/dashboard/Reward'
        ),
        getItem(
            'NFT',
            '6',
            <img className="sele_icon" src={nft} />,
            <img className="sele_icon" src={nft_no} />,
            '/dashboard/NFT'
        ),
        getItem(
            t('inform'),
            '7',
            <img className="sele_icon" src={tongzhi} />,
            <img className="sele_icon" src={tongzhi_no} />
        ),
        getItem(
            t('set'),
            '8',
            <img className="sele_icon" src={shezhi} />,
            <img className="sele_icon" src={shezhi_no} />
        )
    ]);
    const [language, setLanguage] = useState(localStorage.getItem('language'));
    const navigate = useNavigate();
    const lngs = [
        { nativeName: 'English', short: 'en' },
        { nativeName: '中文', short: 'zh' }
    ];

    useEffect(() => {
        console.log(2)
    }, [])

    const handleLanguageChange = (value) => {
        localStorage.setItem('language', value);
        i18n.changeLanguage(value);
        setLanguage(value);
        // getSub6Value();  // 这里的函数我不确定你的具体需求，暂时注释掉了
    };
    const onClick = (item, key) => {
        setSeleKey(key);
        navigate(item.path);
    };
    //头像下拉框显示内容
    const menutext = (
        <Menu>
            <Menu.Item key={'1'}>
                <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                    用户名
                </a>
            </Menu.Item>
            <Menu.Item key={'2'}>
                <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                    xxx
                </a>
            </Menu.Item>
            <Menu.Item key={'3'}>
                <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
                    xxxxxx
                </a>
            </Menu.Item>
        </Menu>
    );

    return (
        <>
            <Row className="dashboard-container">


                <Col span={20} className="right">
                    {/*上边栏*/}
                    <div className="dashboard-top">
                        <Button
                            type="text"
                            className="menu-item menu-item-first"
                            onClick={() => navigate('/')}>
                            {t('homeText')}
                        </Button>
                        <Button type="text" className="menu-item">
                            {t('FollowCase')}
                        </Button>
                        <Button type="text" className="menu-item">
                            NFT
                        </Button>
                        <Button type="text" className="menu-item">
                            DAO
                        </Button>
                        <Button type="text" className="menu-item">
                            {t('Consult')}
                        </Button>
                        <Button type="text" className="menu-item">
                            FQ
                        </Button>
                        <Select
                            id="language"
                            popupMatchSelectWidth={false}
                            value={language}
                            onChange={handleLanguageChange} // 修改这里的函数调用
                            className="menu-item-select">
                            {lngs.map((item) => (
                                <Select.Option key={item.short} value={item.short}>
                                    {item.nativeName}
                                </Select.Option>
                            ))}
                        </Select>
                        <img src={Notice} className="menu-item notice-image " alt="" />
                        <Dropdown overlay={menutext} placement="top">
                            <div className="menu-item menu-item-last">
                                <img
                                    src={Sculpture}
                                    className="menu-item sculpture-image "
                                    alt=""
                                />
                                <DownOutlined />
                            </div>
                        </Dropdown>
                    </div>

                    {/*中间部分*/}
                    <div className="dashboard-content ">
                        <div className="bottom">
                            {/* <Outlet /> */}
                        </div>
                    </div>
                </Col>
            </Row>

            <div className="iphoneMain">
                {!Chrome && <PageHead />}
                <Outlet />
                {!Chrome && <NavBarBottom />}
            </div>
        </>
    );
};

export default Dashboard;
